<!-- 活动规则 -->
<template>
  <div class="rule-main">
    <div class="rule-wrap">
      <div class="table-rule">
        <div class="close">
          <img
            @click="handleClose"
            src="@/assets/images/2020_dati/wjb_close.png"
            alt=""
          />
        </div>
        <div class="header-table">
          <div class="gift-header" @click="handleTab('gift')">
            <span :class="{ action: show == 'gift' }">活动网点</span>
          </div>
          <div class="rule-header" @click="handleTab('rule')">
            <span :class="{ action: show == 'rule' }">活动说明</span>
          </div>
        </div>

        <div class="content-table">
          <!-- 活动规则 -->
          <!-- 活动规则 -->
          <div class="rule-content" v-if="show == 'rule'">
            <h4>1、活动时间</h4>
            <p>2020年11月16日—2020年11月30日</p>
            <h4>2、活动对象</h4>
            <p>
              在分行微信公众号“客户俱乐部”线上认证的客户（以下简称“特邀客户”。
            </p>
            <h4>3、活动内容</h4>
            <p>
              答题：特邀客户通过活动界面填写问卷，填写完整即送20积分。
            </p>

            <h4>4、活动细则</h4>
            <p>（1）参加本活动的客户即视为理解并同意本活动细则。</p>
            <p>
              （2）本活动仅限邮储银行厦门分行微信公众号实名认证客户参与。客户参加有奖问卷活动，填写完整即送20积分，系统即时自动将该分值纳入客户在分行“客户俱乐部”中的个人积分账户。
            </p>
            <p>
              （3）客户填写问卷需围绕问题进行选择（选择题）或有效答题（自由题），答题内容如无效，交卷时将提示“系统检测到您的答案不规范，请重新填写”，如答题内容无效坚持交卷，无效答题达2题以上（含2题），该答卷最终得积分10分。若系统检测到客户发表敏感词汇，系统将自动取消客户的活动资格及活动所获得的礼品权益，情节严重的追究其相关责任。说明：无效作答包含纯数字（例：12345）、纯英文（例：abc）、不文明词汇、反动词汇及与题目内容无关的表述内容。
            </p>
            <p>（4）每人只有一次答卷机会</p>
            <p>
              （5）此次“有奖答题
              约惠邮礼”线上营销活动积分活动归属于分行微信公众号“客户俱乐部”活动，其积分兑换权益项目、兑换时间、积分活动规则等规定以分行微信公众号“客户俱乐部”积分兑换活动公告为准。
            </p>

            <h4>5、积分查询和兑换</h4>
            <p>
              （1）客户通过邮储银行厦门分行公众号“客户俱乐部”-“个人中心”-“我的积分”查询个人总积分
            </p>
            <p>
              （2）客户持有积分即可参加分行微信公众号“客户俱乐部”积分兑换平台相关积分兑换活动，相关权益项目和活动规则详见分行公众号“客户俱乐部”相关规定。
            </p>
            <h4>6、温馨提示</h4>

            <p>在法律允许范围内，本活动最终解释权归邮储银行厦门分行所有</p>
          </div>
          <!-- 活动礼品 -->
          <div class="gift-content" v-if="show == 'gift'">
            <!-- <ul class="">
              <li>
                <img src="@/assets/images/2020_dati/qqppp/yuanchu.png" />
                <ul>
                  <li class="li11">元初超市500元电子代金券</li>
                </ul>
              </li>
              <li>
                <img src="@/assets/images/2020_dati/qqppp/dami.png" />
                <ul>
                  <li class="li11">农特康泉天然有机大米5000g</li>
                </ul>
              </li>
              <li>
                <img src="@/assets/images/2020_dati/qqppp/you.png" />
                <ul>
                  <li class="li11">盛洲食用油2.5L</li>
                </ul>
              </li>
              <li>
                <img src="@/assets/images/2020_dati/qqppp/jifen.png" />
                <ul>
                  <li class="li11">客户俱乐部30积分</li>
                </ul>
              </li>
              <li>
                <img src="@/assets/images/2020_dati/qqppp/jifen.png" />
                <ul>
                  <li class="li11">客户俱乐部10积分</li>
                </ul>
              </li>
              <li>
                <img src="@/assets/images/2020_dati/qqppp/jifen.png" />
                <ul>
                  <li class="li11">客户俱乐部1积分</li>
                </ul>
              </li>
            </ul> -->
            <table class="table">
              <tr class="th1">
                <td class="td1">网点简称</td>
                <td class="td2">地址</td>
                <td class="td3">联系电话</td>
              </tr>
              <tr>
                <td class="td1">厦门分行(营业部)</td>
                <td class="td2">厦门市思明区莲岳路一号磐基商务楼2楼246号</td>
                <td class="td3">2629333</td>
              </tr>
              <tr>
                <td class="td1">思明区支行(营业部)</td>
                <td class="td2">厦门市思明区后江埭路37号邮政大楼一楼</td>
                <td class="td3">2056757</td>
              </tr>
              <tr>
                <td class="td1">育秀支行</td>
                <td class="td2">厦门市思明区育秀里66-67号</td>
                <td class="td3">2286756</td>
              </tr>
              <tr>
                <td class="td1">鹭江支行</td>
                <td class="td2">厦门市思明区鹭江道96好钻石海岸106-107单元</td>
                <td class="td3">2208171</td>
              </tr>
              <tr>
                <td class="td1">富山支行</td>
                <td class="td2">厦门市思明区厦禾路993号之104-105</td>
                <td class="td3">5800269</td>
              </tr>
              <tr>
                <td class="td1">金榜支行</td>
                <td class="td2">厦门市思明区厦禾路861号之108-110单元</td>
                <td class="td3">5162329</td>
              </tr>
              <tr>
                <td class="td1">瑞景支行</td>
                <td class="td2">厦门市思明区莲前东路636号</td>
                <td class="td3">5928107</td>
              </tr>
              <tr>
                <td class="td1">观音山支行</td>
                <td class="td2">厦门市思明区台南路59号108单元</td>
                <td class="td3">5162673</td>
              </tr>
              <tr>
                <td class="td1">湖里区支行(营业部)</td>
                <td class="td2">厦门市湖里区吕岭路21号吕岭邮电大楼</td>
                <td class="td3">5518891</td>
              </tr>

              <tr>
                <td class="td1">高殿支行</td>
                <td class="td2">厦门市湖里区殿前一路289号高殿大厦一层</td>
                <td class="td3">5627074</td>
              </tr>
              <tr>
                <td class="td1">湖边支行</td>
                <td class="td2">厦门市湖里区枋湖东路268号蓉毅达大厦1楼</td>
                <td class="td3">5734479</td>
              </tr>
              <tr>
                <td class="td1">象屿支行</td>
                <td class="td2">
                  厦门市湖里区象屿保税区屿南四路1-9号自贸金融中心C栋1层105-106单元
                </td>
                <td class="td3">5214492</td>
              </tr>
              <tr>
                <td class="td1">马垄支行</td>
                <td class="td2">厦门市湖里区悦华路151号豪礼大厦一层</td>
                <td class="td3">5650859</td>
              </tr>
              <tr>
                <td class="td1">机场支行</td>
                <td class="td2">厦门市湖里区金尚路588号（翠湖庄园）</td>
                <td class="td3">5712610</td>
              </tr>
              <tr>
                <td class="td1">禾山支行</td>
                <td class="td2">厦门市湖里区禾山路505号之六、之七、之八</td>
                <td class="td3">5512109</td>
              </tr>
              <tr>
                <td class="td1">万达支行</td>
                <td class="td2">厦门市湖里区金钟路1号144-147单元</td>
                <td class="td3">5772051</td>
              </tr>
              <tr>
                <td class="td1">金尚支行</td>
                <td class="td2">厦门市湖里区金尚路146号</td>
                <td class="td3">5516310</td>
              </tr>
              <tr>
                <td class="td1">集美区支行（营业部）</td>
                <td class="td2">厦门市集美区石鼓路136号</td>
                <td class="td3">6068259</td>
              </tr>
              <tr>
                <td class="td1">杏林支行</td>
                <td class="td2">厦门市集美区杏东路19号第一层01单元</td>
                <td class="td3">6078195</td>
              </tr>
              <tr>
                <td class="td1">杏北支行</td>
                <td class="td2">厦门市集美区杏林北二路89号一层101、二层201</td>
                <td class="td3">6226573</td>
              </tr>
              <tr>
                <td class="td1">灌口支行</td>
                <td class="td2">厦门市集美区灌口镇凤泉东里21-23号</td>
                <td class="td3">6092929</td>
              </tr>
              <tr>
                <td class="td1">海沧区支行（营业部）</td>
                <td class="td2">厦门市海沧区海富路250号</td>
                <td class="td3">6051283</td>
              </tr>
              <tr>
                <td class="td1">嵩屿支行</td>
                <td class="td2">
                  中国（福建）自由贸易试验区厦门片区嵩屿南二路80号
                </td>
                <td class="td3">6059102</td>
              </tr>
              <tr>
                <td class="td1">海虹支行</td>
                <td class="td2">厦门市海沧区沧湖东一里373号</td>
                <td class="td3">6585659</td>
              </tr>
              <tr>
                <td class="td1">霞阳支行</td>
                <td class="td2">厦门市海沧区霞阳社区霞光外口公寓B1-B2号店铺</td>
                <td class="td3">6510015</td>
              </tr>
              <tr>
                <td class="td1">同安区支行（营业部）</td>
                <td class="td2">厦门市同安区城南路299号</td>
                <td class="td3">7020424</td>
              </tr>
              <tr>
                <td class="td1">南门支行</td>
                <td class="td2">厦门市同安区环城北路140号、市场路2号</td>
                <td class="td3">7023226</td>
              </tr>
              <tr>
                <td class="td1">株厝支行</td>
                <td class="td2">厦门市同安工业集中区梧侣路珠厝里150-152号</td>
                <td class="td3">7257529</td>
              </tr>
              <tr>
                <td class="td1">西柯支行</td>
                <td class="td2">厦门市同安区西柯镇西福路7号一层</td>
                <td class="td3">7115663</td>
              </tr>
              <tr>
                <td class="td1">翔安区支行（营业部）</td>
                <td class="td2">厦门市翔安区马巷镇巷东路318号</td>
                <td class="td3">7063044</td>
              </tr>
              <tr>
                <td class="td1">新圩支行</td>
                <td class="td2">厦门市翔安区新圩镇山岬路1号</td>
                <td class="td3">7070001</td>
              </tr>
              <tr>
                <td class="td1">开发新区支行</td>
                <td class="td2">厦门市翔安区春江里58号101店面</td>
                <td class="td3">7023226</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      show: 'rule'
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 切换
    handleTab(show) {
      this.show = show;
    },
    // 关闭
    handleClose() {
      this.$parent.maskList.rule = false;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.rule-main {
  width: 100%;
  //   height: 100vh;
  padding: 40px;
  position: relative;
  max-height: calc(617px * 2);
  .rule-wrap {
    margin-top: 50px;
    background-color: #fff;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border: 10px solid #ff5f2d;
    .table-rule {
      padding: 30px;
      height: 100%;
      display: flex;
      flex-flow: column;
      .close {
        position: absolute;
        right: 40px;
        top: 90px;
        width: 60px;
        height: 60px;
        z-index: 9999;
      }
      // 头部
      .header-table {
        position: relative;
        display: flex;
        justify-content: space-between;
        color: #ff5f2d;
        font-size: 36px;
        border-bottom: 1px solid #ff5f2d;
        background-color: #fff;
        // padding-bottom: 20px;
        .rule-header {
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            padding-bottom: 20px;
          }
        }
        .gift-header {
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          //   border-right: 1px solid #ff5f2d;
          span {
            padding-bottom: 20px;
          }
        }
        .action {
          border-bottom: 6px solid #ff5f2d;
        }
      }
      // 内容
      .content-table {
        overflow: hidden;
        overflow-y: auto;
        flex: 1;
        // 活动规则
        .rule-content {
          height: 100%;
          padding: 10px;
          h4 {
            color: #ff5f2d;
          }

          //   .table {
          //     margin-top: 10px;
          //     // border: 1px solid red;
          //     text-align: center;
          //     .th1 {
          //       background-color: #fdc27e;
          //       color: #da3215;
          //     }
          //     td {
          //       border: 1px solid #a8a8a8;
          //     }
          //     .td1 {
          //       width: 150px;
          //     }
          //     .td2 {
          //       width: 250px;
          //     }
          //     .td3 {
          //       width: 150px;
          //     }
          //   }
        }
        // 奖品
        .gift-content {
          height: 100%;
          .table {
            margin-top: 10px;
            // border: 1px solid red;
            text-align: center;
            .th1 {
              background-color: #fdc27e;
              color: #da3215;
            }
            td {
              border: 1px solid #a8a8a8;
            }
            .td1 {
              width: 150px;
            }
            .td2 {
              width: 250px;
            }
            .td3 {
              width: 150px;
            }
          }
          img {
            margin-left: 50px;
            margin-top: 20px;
            width: 156px;
            height: 156px;
          }
          .li11 {
            margin-left: 260px;
            margin-top: -100px;
            float: left;
          }
        }
      }
    }
  }
}
</style>
